<template>
  <div>
    <div class="header">
      当前年份：{{schoolYear.year}}
      当前学期：{{schoolYear.termNumber}}
      当前周：{{schoolYear.thisWeek}}
      开学时间：{{schoolYear.yearBegin}}
      放假时间：{{schoolYear.yearEnd}}
    </div>
    <div class="waitQuerys">
      <div v-for="(item,index) in querylabapply" :key="index">
        <div @click="query(item)" class="waitQuery">待申请</div>
      </div>
    </div>

    <div class="content">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>实验室信息</span>
              </div>
              <div>
                <el-row class="query">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <p>实验室名称：{{querylabByid.labName}}</p>
                      <p>实验室所属楼栋：{{querylabByid.labHouse}}</p>
                      <p>实验室类型:{{querylabByid.labType}}</p>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <p>实验室编号：{{querylabByid.labId}}</p>
                      <p>实验室位置：{{querylabByid.labPosition}}</p>
                      <p>实验室最大容纳人数：{{querylabByid.labSite}}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>申请人信息</span>
              </div>
              <div>
                <el-row class="query">
                  <el-col :span="12">
                    <div class="grid-content bg-purple">
                      <p>姓名：{{querystudentInfo.name}}</p>
                      <p>账号：{{querystudentInfo.account}}</p>
                      <p>手机电话：{{querystudentInfo.phone}}</p>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                      <p>学号：{{querystudentInfo.number}}</p>
                      <p>邮箱：{{querystudentInfo.email}}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>使用时间</span>
              </div>
              <div class="query">
                <p>周次</p>
                <div class="tableStyle">
                  <div v-for="item in timesOfWeekArr" :key="item.item">
                    <div
                      class="itemStyle"
                      :class=" item.isbg ? timesOfWeekStyle : '' "
                    >{{item.item}}</div>
                  </div>
                </div>

                <p>周几</p>
                <div class="tableStyle">
                  <div v-for="item in weekArr" :key="item.item">
                    <div class="itemStyle" :class=" item.isbg ? weekStyle : '' ">{{item.item}}</div>
                  </div>
                </div>
                <p>第几节</p>
                <div class="tableStyle">
                  <div v-for="item in sectionArr" :key="item.item">
                    <div class="itemStyle" :class=" item.isbg ? sectionStyle : '' ">{{item.item}}</div>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>申请理由</span>
              </div>
              <div>
                <p>{{querylab.reason}}</p>
              </div>
            </el-card>

            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>操作</span>
              </div>
              <div>
                <el-form ref="form" :model="form">
                  <el-form-item>
                    <el-input
                      type="textarea"
                      v-model="form.region"
                      autocomplete="off"
                      cols="30"
                      rows="5"
                      placeholder="请输入理由"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-select v-model="form.region" placeholder="请选择" class="selectStyle">
                      <el-option label="实验室已经被使用，请另选申请时间" value="实验室已经被使用，请另选申请时间"></el-option>
                      <el-option label="描述信息模糊，不符合要求" value="描述信息模糊，不符合要求"></el-option>
                      <el-option label="符合要求，同意申请" value="符合要求，同意申请"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-button type="success" class="bottomStyle" @click="approval">同意申请</el-button>
                  <el-button type="danger" class="bottomStyle" @click="reject">驳回申请</el-button>
                </el-form>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  querylabapply,
  querystudentInfo,
  querylabByid,
  processlabapply,
} from "@/api/teacher/query.js";
import { schoolYear } from "@/api/laboratoryApply/laboratoryApply.js";
import axios from "axios";
export default {
  data() {
    return {
      schoolYear: "",
      querylabapply: "",
      form: {
        region: "",
      },
      querylab: {},
      querylabByid: {},
      querystudentInfo: {},

      timesOfWeekStyle: "changeStyle",
      weekStyle: "changeStyle",
      sectionStyle: "changeStyle",

      timesOfWeekArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
        { isbg: false, item: 8 },
        { isbg: false, item: 9 },
        { isbg: false, item: 10 },
        { isbg: false, item: 11 },
        { isbg: false, item: 12 },
        { isbg: false, item: 13 },
        { isbg: false, item: 14 },
        { isbg: false, item: 15 },
        { isbg: false, item: 16 },
        { isbg: false, item: 17 },
        { isbg: false, item: 18 },
      ],

      weekArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
      ],

      sectionArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
        { isbg: false, item: 8 },
        { isbg: false, item: 9 },
        { isbg: false, item: 10 },
        { isbg: false, item: 11 },
      ],
    };
  },
  created() {
    querylabapply({
      data: {
        applyStatus: 0,
      },
    }).then((response) => {
      this.querylabapply = response.data;
    });

    schoolYear({})
      .then((response) => {
        this.schoolYear = response.data;
      })
      .catch((error) => {
        console.log(error.data);
      });
  },
  methods: {
    query(item) {
      this.querylab = item;
      console.log(this.querylab);

      querylabByid({
        data: {
          labId: this.querylab.lab_id,
        },
      }).then((response) => {
        this.querylabByid = response.data;
      });

      querystudentInfo({
        data: {
          userId: this.querylab.user_id,
        },
      }).then((response) => {
        this.querystudentInfo = response.data;
      });

      let weeks = this.querylab.apply_week.split(",").map(Number);
      for (let i = 0; i < this.timesOfWeekArr.length; i++) {
        this.timesOfWeekArr[i].isbg = false;
        for (let j = 0; j < weeks.length; j++) {
          if (this.timesOfWeekArr[i].item == weeks[j]) {
            this.timesOfWeekArr[i].isbg = true;
          }
        }
      }

      let week = this.querylab.apply_day.split(",").map(Number);
      for (let i = 0; i < this.weekArr.length; i++) {
        this.weekArr[i].isbg = false;
        for (let j = 0; j < week.length; j++) {
          if (this.weekArr[i].item == week[j]) {
            this.weekArr[i].isbg = true;
          }
        }
      }

      let weekss = this.querylab.apply_date.split(",").map(Number);
      for (let i = 0; i < this.sectionArr.length; i++) {
        this.sectionArr[i].isbg = false;
        for (let j = 0; j < weekss.length; j++) {
          if (this.sectionArr[i].item == weekss[j]) {
            this.sectionArr[i].isbg = true;
          }
        }
      }
    },
    approval() {
      processlabapply({
        labApplyId: this.querylab.lab_apply_id + "",
        labId: this.querylab.lab_id,
        type: "approval",
        returnReason: this.form.region,
        userId: this.querylab.user_id
      }).then((response) => {
        if (response.code === 0) {
          this.$message({
            message: response.msg,
            type: "success",
          });
          location.reload();
        } else {
          this.$message({
            message: response.msg,
            type: "error",
          });
        }
      });
    },
    reject() {
      processlabapply({
        labApplyId: this.querylab.lab_apply_id + "",
        labId: this.querylab.lab_id,
        type: "reject",
        returnReason: this.form.region,
        userId: this.querylab.user_id
      }).then((response) => {
        if (response.code == 0) {
          this.$message({
            message: response.msg,
            type: "success",
          });
          location.reload();
        } else {
          this.$message({
            message: response.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #f6f6f6;
}
.header {
  border-bottom: 1px solid #f6f6f6;
}
.waitQuerys {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  .waitQuery {
    padding: 10px;
    width: 100px;
    height: 50px;
    border-radius: 5px;
    border: 1px solid #bbbbbb;
    background-color: #009688;
    box-shadow: 0 5px 5px #5fb878;
    // #5FB878
    margin: 20px;
    cursor: pointer;
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-bottom: 10px;
}
.query {
  text-align: left;
}

.tableStyle {
  padding: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  .itemStyle {
    padding: 6px;
    margin: 2px;
    background-color: #393d49;
    color: #e0e0e0;
    border: 1px solid #eeeeee;
    text-align: center;
  }
}
.selectStyle {
  width: 100%;
}
.bottomStyle {
  margin: 10px 0px;
  width: 100%;
}
.changeStyle {
  background-color: #5fb878 !important;
}
</style>